import React, { useState } from "react";
import { LoginApi, RegisterApi } from "@/api";
import "./login.less";
// 脚手架的图片加载方式，跟我们之前写html不一样，需要先把图片当成是模块引入
import logo from "@/assets/images/logo.png";
import Toast from "@/components/Toast";
// 导入mui的组件   输入框
import { TextField, Divider, Button } from "@mui/material";
import { useNavigate } from "react-router";
import { useToast } from "@/util/util";

export default function Login() {
  // 定义一个数据，这个数据控制按钮是登录还是注册
  // const [isLogin, setisLogin] = useState(true)
  const [isLoginPage, setIsLoginPage] = useState(true);
  // 如果是true 表示当前是登录，false是注册
  // 3.准备两个数据   手机号和密码
  const [username, setUsername] = useState("12345678901");
  const [password, setPassword] = useState("wolfcode123");
  const navigate = useNavigate();
  const toast = useToast();
  // 注册和登录分开，分别调用
  // 登录
  const login = () => {
    LoginApi({
      username,
      password,
    }).then((res) => {
      if (res.errCode === 0) {
        console.log(res);
        toast("登录成功", "success");
        // console.log(res);
        sessionStorage.setItem("token", res.data); //存sessionStorage是如果用户把页面关闭了，希望用户重新登录
        // 登录成功的逻辑
        // 跳转到home
        navigate("/home");
      }
    });
  };
  // 注册
  const register = () => {
    RegisterApi({
      phone: username,
      password,
    }).then((res) => {
      // 如果成功
      // wolfcode123
      alert(res.message);
      // if (res.errCode === 0) {
      //   alert(res.message);
      // }
    });
  };
  // 2.写一个按钮点击事件的函数
  const buttonClick = () => {
    // 对表单进行验证
    //  用户号和密码为空  无法注册
    if (username.trim().length === 0) {
      toast("手机号不能为空", "error");
      if (password.trim().length === 0) {
        toast("密码不能为空", "error");
        return;
      }
    }
    //   // 如果手机号不满足条件
      if (!/^[1]\d{10}$/.test(username)) {
        toast("手机号格式不正确", "error");
        return;
      }
      // 先判断 当前是注册还是登录
      
      isLoginPage ? login() : register();
  };
  //1. 搭建静态结构  html 和css
  return (
    <div className="login">
      <section className="logo">
        <img src={logo} alt="" />
      </section>
      <section className="form">
        <Divider />
        {/* 4.把输入框变成受控组件 */}
        <TextField
          id="outlined-basic"
          placeholder="请输入手机号"
          variant="outlined"
          onChange={(e) => setUsername(e.target.value)}
        />
        <Divider />
        <TextField
          id="outlined-basic"
          placeholder="请输入密码"
          type="password"
          variant="outlined"
          onChange={(e) => setPassword(e.target.value)}
        />
        <Divider />
        <Button variant="contained" onClick={buttonClick}>
          {isLoginPage ? "登录" : "注册"}
        </Button>
        <Divider />
        <span className="change" onClick={() => setIsLoginPage(!isLoginPage)}>
          去{isLoginPage ? "注册" : "登录"}
        </span>
      </section>
    </div>
  );
}
